.notifications {
  position: absolute;
  right: 80px;
  top: 56px;
  border-radius: 4px;
  background-color: $dark-semi-light;
  box-shadow: $shadow-1;
  backdrop-filter: $blur;
  border-radius: 14px;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out,
    width 0.2s ease-in-out, height 0.2s ease-in-out;
  pointer-events: none;
  transform: translate3d(0, -8px, 0);
  opacity: 0;
  z-index: 3;
  cursor: default;

  &__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: $padding-xl;

    &-title {
      font-weight: $fw-semi-bold;
      font-size: $fz-lg;
      line-height: 24px;
      color: $white;
    }

    &-clear {
      font-size: $fz-sm;
      line-height: 16px;
      color: $white;
      transition: $transition-1;
      cursor: pointer;

      &:hover {
        color: $primary;
      }
    }
  }

  &__wrapper {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 212px;
    padding: $padding-llg;
    width: 320px;
  }

  &_visible {
    opacity: 1;
    transform: translate3d(0, 8px, 0);
    pointer-events: auto;
  }

  &__item {
    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: $padding-xxs;
      gap: $padding-llg;
    }

    &-title {
      font-size: $fz-md;
      line-height: 16px;
      color: $white;
    }

    &-time {
      font-size: 11px;
      line-height: 16px;
      color: $grey;
      min-width: 80px;
      text-align: right;
    }

    &-text {
      font-size: $fz-sm;
      line-height: 16px;
      color: $grey;
    }

    &:not(:first-of-type) {
      padding-top: $padding-md;
    }

    &:not(:last-child) {
      padding-bottom: $padding-md;
      border-bottom: $border-transparent;
    }
  }
}
